<template>
	<view class="content">
		<view class="frame ">
			<view class="u-flex u-col-top">
				<textarea maxlength="200" v-model="content" placeholder="请输入意见反馈内容"
					placeholder-class="placeholder-style" class="input"></textarea>
			</view>
			<view class="frame1">
				<view class="num-tit">{{content.length}}/200字</view>
			</view>
		</view>
		<view class="btn" @click="doSubmit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
			};
		},
		onLoad() {
            
        },
		methods: {
            // 提交
            doSubmit() {
                if (!this.content) {
                    this.$toast('请输入反馈内容');
                    return
                }
                this.$ajax('feedback', {
                	user_token: this.$getSync('userToken'),
                    feedback: this.content,
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.$toast('已提交');
                        setTimeout(() => {
                            this.$backT()
                        }, 300)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
        }
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .img-box-item{
        position: relative;
    }
    
    .del-img{
        font-size: 24rpx;
        color: #fff;
        padding: 5rpx 8rpx;
        background: rgba(0,0,0, .5);
        position: absolute;
        right: 15rpx;
        bottom: 15rpx;
    }
    
    .up-img{
        width: 149rpx;
        height: 145rpx;
        margin-right: 14rpx;
        margin-bottom: 14rpx;
    }
    
    textarea{
        width: 100%;
        height: 600rpx!important;
        font-size: 24rpx;
        color:#333;
    }
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
        padding: 20rpx;

		.frame {
			width: 100%;
			background-color: #fff;
			padding: 52rpx 20rpx 20rpx;
            border-radius: 20rpx;

			.input {
				display: inline-block;
				padding: 0 20rpx;
				font-size: 26rpx;
				color: #000;
				height: 260rpx !important;
				margin-bottom: 16rpx;
			}

			.placeholder-style {
				color: #a7a7a7;
			}

			.input-icon {
				width: 34rpx;
				height: 34rpx;
			}

			.frame1 {
				width: 100%;

				.num-tit {
					font-size: 24rpx;
					color: #959595;
					margin-bottom: 30rpx;
					text-align: right;
				}
			}
		}

		.btn {
			width: 686rpx;
			height: 92rpx;
			border-radius: 15rpx;
			background-color: #f29700;
			font-size: 34rpx;
			color: #fff;
			text-align: center;
			line-height: 92rpx;
			margin-top: 124rpx;
		}
	}
</style>
